<template>
	<div class="linContentBox">
		<el-timeline >
			<el-timeline-item placement="top" timestamp="2022-01-01" class="lineHeight">
				<template #dot>
					<el-icon :size="30" class="iconBox">
						<User/>
					</el-icon>
				</template>
				<template #default>
					<div>
						<el-row style="color: #86909c;font-size: 12px;">
							<el-col :span="5"><div>流程类型：</div></el-col>
							<el-col :span="4"><div>提交</div></el-col>
						</el-row>
					</div>
					<div>
						<el-row>
							<el-col :span="5"><div>提交人：</div></el-col>
							<el-col :span="6"><div>张三</div></el-col>
						</el-row>
					</div>
				</template>
			</el-timeline-item>
			<el-timeline-item placement="top" timestamp="2022-01-02"  class="lineHeight">
				<template #dot>
					<el-icon :size="30" class="iconBox">
						<User/>
					</el-icon>
					<el-icon :size="15" class="iconBoxSuccess">
						<CircleCloseFilled style="color:#e6570d"/>
					</el-icon>
				</template>
				<template #default>
					<div>
						<el-row style="color: #86909c;font-size: 12px;">
							<el-col :span="5"><div>流程类型：</div></el-col>
							<el-col :span="4"><div>转交</div></el-col>
						</el-row>
					</div>
					<div>
						<el-row>
							<el-col :span="5"><div>转交人：</div></el-col>
							<el-col :span="6"><div>张三</div></el-col>
						</el-row>
					</div>
					<div>
						<el-row style="color: #86909c;font-size: 12px;">
							<el-col :span="5"><div>转交给</div></el-col>
							<el-col :span="4"><div>李四</div></el-col>
						</el-row>
					</div>
					<div>测试转交评论点点滴滴颠三倒四</div>
				</template>
			</el-timeline-item>
			<el-timeline-item placement="top" timestamp="2022-01-03" class="lineHeight">
				<template #dot>
					<el-icon :size="30" class="iconBox">
						<User/>
					</el-icon>
					<el-icon :size="15" class="iconBoxSuccess">
						<SuccessFilled style="color:green"/>
					</el-icon>
				</template>
			</el-timeline-item>
			<el-timeline-item placement="top" timestamp="2022-01-04"  class="lineHeight">
				<template #dot>
					<el-icon :size="30" class="iconBox">
						<User/>
					</el-icon>
					<el-icon :size="15" class="iconBoxSuccess">
						<Clock style="color:#0d63e6"/>
					</el-icon>
				</template>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>
<script setup>
import { User,SuccessFilled,CircleCloseFilled,Clock } from '@element-plus/icons-vue'
</script>
<style scoped>
	.linContentBox{
		padding:10px;
	}
	.iconBox{
		position: absolute;
		top:-15px;
		left: -10px;
		border-radius: 18px;
		background: #C1C1C1;
		border-radius:70%;
	}
	.iconBoxSuccess{
		left:30%;
		background: #C1C1C1;
		border-radius:50%;
	}
	.lineHeight{
		position: relative;
	}
</style>
